<template><div><h1 id="js的函数重载" tabindex="-1"><a class="header-anchor" href="#js的函数重载" aria-hidden="true">#</a> JS的函数重载</h1>
<!--  -->
<h2 id="什么叫做函数重载" tabindex="-1"><a class="header-anchor" href="#什么叫做函数重载" aria-hidden="true">#</a> 什么叫做函数重载？</h2>
<p>函数重载是指在同一个作用域内，有多个函数名相同，但参数列表（包括参数类型、个数、顺序）不同的函数。简单来说，就是多个函数可以使用相同的函数名，但是它们的参数不同。这种机制使得我们可以使用相同的函数名来定义多个函数，从而简化代码和提高可读性。
重点是：1、同名函数可以定义多次；2、参数数量或类型不一样。</p>
<!--  -->
<h2 id="在js中如何实现函数重载呢" tabindex="-1"><a class="header-anchor" href="#在js中如何实现函数重载呢" aria-hidden="true">#</a> 在JS中如何实现函数重载呢？</h2>
<p>实现思路：创建一个map数组，将参数的数据类型作为键，将传过来的函数作为值，并将其对应起来存放到map数组内。当调用函数时会根据传入的所有参数的类型链接成字符串作为键去map数组中获取对应的值，而这个值就是对应的函数，然后再调用这个函数并将传入过来的参数传给这个函数。这样就实现了函数的重载。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token doc-comment comment">/**
 * <span class="token keyword">@method</span> createOverload  创建一个实现重载功能的函数
 * <span class="token keyword">@return</span> <span class="token class-name"><span class="token punctuation">{</span>Function<span class="token punctuation">}</span></span> 返回一个实现重载功能函数
 */</span>
<span class="token keyword">function</span> <span class="token function">createOverload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token comment">// 创建一个map数组用于存放映射关系</span>
	<span class="token keyword">const</span> fnMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token comment">// 声明一个函数实现重载</span>
	<span class="token keyword">function</span> <span class="token function">overload</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>agrs</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token comment">// 将调用函数时传过来的所有参数的数据类型以‘,’链接成支付串作为键</span>
		<span class="token keyword">const</span> key <span class="token operator">=</span> agrs<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">it</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">typeof</span> it<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token comment">// 以这个键的值去映射数组中获取对应的函数</span>
		<span class="token keyword">const</span> fn <span class="token operator">=</span> fnMap<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token comment">// 如果没有对应的函数就报错</span>
		<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>fn<span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">TypeError</span><span class="token punctuation">(</span><span class="token string">'没有找到对应的实现函数'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token comment">// 如果有对应关系存在，就执行对应的函数并将传过来的参数给到这个函数</span>
		<span class="token keyword">return</span> <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> agrs<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

	<span class="token comment">/* 
		在原型链上添加一个函数
		该函数用于添加映射关系，最后一个参数必须是一个函数，
		前面其余所有的参数就是这个函数所需要的参数的数据类型，并且位置上必须对应。
	*/</span>
	overload<span class="token punctuation">.</span><span class="token function-variable function">addImpl</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>agrs</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token comment">// 获取最后一个参数</span>
		<span class="token keyword">const</span> popFn <span class="token operator">=</span> agrs<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token comment">// 判断最后一个函数是不是函数</span>
		<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> popFn <span class="token operator">!==</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token comment">// 如果最后一个参数不是函数就报错</span>
			<span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">TypeError</span><span class="token punctuation">(</span><span class="token string">'最后一个必须是函数'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token comment">// 如果最后一个参数是函数，就将前面所有的参数以‘,’链接起来，作为键，</span>
		<span class="token keyword">const</span> key <span class="token operator">=</span> agrs<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token comment">// 以key为键，传过来的最后一个参数（函数）作为值，形成映射关系存放到map数组中</span>
		fnMap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> popFn<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">;</span>
	<span class="token comment">// 返回实现重载的功能函数</span>
	<span class="token keyword">return</span> overload<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="如何使用呢" tabindex="-1"><a class="header-anchor" href="#如何使用呢" aria-hidden="true">#</a> 如何使用呢？</h2>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>	<span class="token comment">// 创建重载功能函数</span>
	<span class="token keyword">const</span> overload <span class="token operator">=</span> <span class="token function">createOverload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

	<span class="token comment">// 添加映射关系</span>
	overload<span class="token punctuation">.</span><span class="token function">addImpl</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'没有参数'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	overload<span class="token punctuation">.</span><span class="token function">addImpl</span><span class="token punctuation">(</span><span class="token string">'string'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">有参数: string: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	overload<span class="token punctuation">.</span><span class="token function">addImpl</span><span class="token punctuation">(</span><span class="token string">'number'</span><span class="token punctuation">,</span> <span class="token string">'string'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">number<span class="token punctuation">,</span> str</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">有参数: number: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>number<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, string: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>str<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	overload<span class="token punctuation">.</span><span class="token function">addImpl</span><span class="token punctuation">(</span><span class="token string">'string'</span><span class="token punctuation">,</span> <span class="token string">'number'</span><span class="token punctuation">,</span> <span class="token string">'boolean'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">str<span class="token punctuation">,</span> number<span class="token punctuation">,</span> bool</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">有参数: string: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>str<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, number: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>number<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, boolean: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>bool<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

	<span class="token comment">// 调用函数</span>
	<span class="token function">overload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token function">overload</span><span class="token punctuation">(</span><span class="token string">'张三'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token function">overload</span><span class="token punctuation">(</span><span class="token number">22</span><span class="token punctuation">,</span> <span class="token string">'张三'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token function">overload</span><span class="token punctuation">(</span><span class="token string">'张三'</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


